<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Studeon</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<!--header区-->
<header>
    <div class="w clearfix">
        <div class="logo fl"><img src="images/logo.png"></div>
        <ul class="nav fl clearfix">
            <li class="fl"><a href="index">Home</a></li>
            <li class="fl"><a href="#">About</a></li>
            <li class="fl"><a href="#">Portfolio</a></li>
            <li class="fl features"><a href="features.html">Features</a>
                <ul class="subnav">
                    <li><a href="#">Typography</a></li>
                    <li><a href="#">Shortcodes</a></li>
                    <li><a href="#">Columns</a></li>
                    <li><a href="#">Pricing Plans</a></li>
                    <li><a href="#">Alerts</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </li>
            <li class="fl"><a href="blog.html">Blog</a></li>
            <li class="fl"><a href="contact.html">Contact</a></li>
        </ul>
        <div class="icons">
            <div class="icon fl"></div>
            <div class="icon fl"></div>
            <div class="icon fl"></div>
            <div class="icon fl"></div>
            <div class="icon fl"></div>
            <div class="icon fl"></div>
        </div>
    </div>
</header>
<!--banner区-->
<div class="banner">
    <div class="w">
        <div class="welcome"><img src="images/banner_l_03.png"></div>
        <div class="picture_1 fr"><img src="images/slide1.png"></div>
        <div class="nav_four_box fl">
            <div class="box1 fl">
            </div>
            <div class="box fl"></div>
            <div class="box fl"></div>
            <div class="box fl"></div>
        </div>
    </div>
</div>
<!--main区-->
<main class="w">
    <div class="main_1">
        <div class="main_1_inner clearfix">
            <div class="fl">
                <h2>EVENTS PLANNING</h2>
                <p1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p1>
                <div class="red">
                    <div class="icon_img">
                    </div>
                </div>
            </div>
            <div class="fl">
                <h3>MASTERING DESIGN</h3>
                <p2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p2>
                <div class="red">
                    <div class="icon_img2">
                    </div>
                </div>
            </div>
            <div class="fl">
                <h4>EXPERT DEVELOPERS</h4>
                <p3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p3>
                <div class="red">
                    <div class="icon_img3">
                    </div>
                </div>
            </div>
            <div class="fl">
                <h5>ATTENSION TO DETAILS</h5>
                <p4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p4>
                <div class="red">
                    <div class="icon_img4"></div>
                </div>
            </div>
            <div class="fl">
                <h6>ANOTHER COOL SERVICE.</h6>
                <p5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p5>
                <div class="red">
                    <div class="icon_img5"></div>
                </div>
            </div>
            <div class="fl">
                <h7>EVENTS PLANNING</h7>
                <p6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p6>
                <div class="red">
                    <div class="icon_img6"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="line"></div>
    <div class="main_2">
        <div class="block">
            <div class="block_2">
                <div class="block_red"></div>
                <div class="block_red2"></div>
                <h1>HI THERE. I AM A THEME, WITH ATTITUDE. I AM ALSO RESPONSIVE, EASY DO EDIT. WHY DON'T YOU TRY ME ?
                </h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.
                </h2>
                <div class="block_red3">
                    <div class="windows"></div>
                    <h>BUY NOW !</h>
                </div>
            </div>
        </div>
    </div>
    <div class="t">
        <h>THE PORTFOLIO</h>
        <div class="line_2 fr">
            <div class="line"></div>
        </div>
    </div>
    <div class="w clearfix">
        <div class="main_3">
            <div class="p1 fl">
                <div class="pic_1">
                    <div class="redblock_1"><P2>WEB DESIGN</P2></div>
                    <div class="redblock_2">
                        <div class="redblock_2_r fl"></div>
                        <div class="redblock_2_r fr"></div>
                    </div>
                </div>
                <h>I AM AN AMAZING PROJECT</h>
                <div class="aline"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.
                </p>
            </div>
            <div class="p2 fl">
                <div class="pic_2">
                    <div class="redblock_1"><P2>WEB DESIGN</P2></div>
                    <div class="redblock_2">
                        <div class="redblock_2_r fl"></div>
                        <div class="redblock_2_r fr"></div>
                    </div>
                </div>
                <h>I AM AN AMAZING PROJECT</h>
                <div class="aline"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.
                </p>
            </div>
            <div class="p3 fl">
                <div class="pic_3">
                    <div class="redblock_1"><P2>WEB DESIGN</P2></div>
                    <div class="redblock_2">
                        <div class="redblock_2_r fl"></div>
                        <div class="redblock_2_r fr"></div>
                    </div>
                </div>
                <h>I AM AN AMAZING PROJECT</h>
                <div class="aline"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.
                </p>
            </div>
            <div class="p4 fl">
                <div class="pic_4">
                    <div class="redblock_1"><P2>WEB DESIGN</P2></div>
                    <div class="redblock_2">
                        <div class="redblock_2_r fl"></div>
                        <div class="redblock_2_r fr"></div>
                    </div>
                </div>
                <h>I AM AN AMAZING PROJECT</h>
                <div class="aline"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.
                </p>
            </div>
        </div>
    </div>
    <div class="line"></div>
    <div class="main_4">
        <div class="block">
            <div class="block_2">
                <div class="block_red"></div>
                <div class="block_red2"></div>
                <h1>SUBSCRIBE TO OUR NEWSLETTER. WE HATE SPAM AS MUCH AS YOU DO, SO NO WORRIES.
                </h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.
                </h2>
                <div class="mail"></div>
                <div class="mail_p"></div>
            </div>
        </div>
    </div>
    <div class="t">
        <h>OUR BLOGGY</h>
        <div class="line_2 fr">
            <div class="line"></div>
        </div>
    </div>
    <div class="t_2">
        <h>TESTIMONIALS</h>
    </div>
    <div class="w clearfix">
        <div class="main_5">
        <div class="main_5_1 fl">
            <div class="m5_p1">
                <div class="m5_mark_p">
                    <div class="m5_mark_p_2 fl"></div>
                    <div class="m5_mark_p_2 fr"></div>
                </div>
            </div>
            <h3>JUST A COOL BLOG POST TITLE HERE.</h3>
            <div class="aline_5"></div>
            <p3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p3>
            <div class="aline_6"></div>
            <p4>Read more</p4>
            <div class="black_point"></div>
        </div>
        <div class="main_5_2 fl">
            <div class="m5_p2">
                <div class="m5_mark_p_block_2">
                    <div class="m5_mark_p_2_f fl"></div>
                    <div class="m5_mark_p_2_f fr"></div>
                </div>
            </div>
            <h3>JUST A COOL BLOG POST TITLE HERE.</h3>
            <div class="aline_5"></div>
            <p3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p3>
            <div class="aline_6"></div>
            <p4>Read more</p4>
            <div class="black_point"></div>
        </div>
        <div class="main_5_3 fr">
            <div class="main_5_3_top">
                <div class="main_5_3_p1 fl"></div>
                <!--<div class="main_5_3_top_1"></div>-->
                <h5 class="fl">VERY PLEASED WITH THE COOL SERVICES PROVIDED.</h5>
                <h6 class="fl">Linda Scott / Webdesigner</h6>
                <a class="toplink fl" href="#">http://www.mywebsite.com</a>
                <div class="main_5_3_txt">
                    <div class="y fl"></div>
                    <p5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.</p5>
                </div>
            </div>
            <div class="main_5_3_bottom">
                <div class="main_5_3_p2 fl"></div>
                <!--<div class="main_5_3_top_1"></div>-->
                <h5 class="fl">VERY PLEASED WITH THE COOL SERVICES PROVIDED.</h5>
                <h6 class="fl">Linda Scott / Webdesigner</h6>
                <a class="toplink fl" href="#">http://www.mywebsite.com</a>
                <div class="main_5_3_txt">
                    <div class="y fl"></div>
                    <p5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.</p5>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>
<!--footer区-->
<footer>
    <div class="footer_top clearfix w">
        <div class="footer_top_1 fl">
            <h7>ABOUT STUDEON</h7>
            <div class="footer_line"></div>
            <p8>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</p8>
            <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</p9>
        </div>
        <div class="footer_top_2 fl">
            <h8>THE TAGS</h8>
            <div class="footer_line"></div>
            <div class="footer_top_2_label">
                <li class="fl"><a href="#">Awesome</a></li>
                <li class="fl"><a href="#">Strategy</a></li>
                <li class="fl"><a href="#">Photography</a></li>
                <li class="fl"><a href="#">Development</a></li>
                <li class="fl"><a href="#">Css</a></li>
                <li class="fl"><a href="#">photoshop</a></li>
                <li class="fl"><a href="#">Html</a></li>
                <li class="fl"><a href="#">Awesome</a></li>
                <li class="fl"><a href="#">Strategy</a></li>
                <li class="fl"><a href="#">Photoshop</a></li>
                <li class="fl"><a href="#">Html</a></li>
            </div>
        </div>
        <div class="footer_top_3 fl">
            <h9>LATEST TWEETS</h9>
            <div class="footer_line"></div>
            <div class="tw">
                <div class="tw_1">
                    <div class="tw_logo"></div>
                    <p11>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p11>
                    <h10>ABOUT 15 MINS</h10>
                </div>
                <div class="tw_2">
                    <div class="tw_logo"></div>
                    <p12>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p12>
                    <h11>ABOUT 15 MINS</h11>
                </div>
            </div>
        </div>
        <div class="footer_top_4 fr">
            <h10>FLICKR FEED</h10>
            <div class="footer_line"></div>
            <div class="footer_top_4_p">
                <div class="fl"></div>
                <div class="fl"></div>
                <div class="fl"></div>
                <div class="fl"></div>
                <div class="fl"></div>
                <div class="fl"></div>
            </div>
        </div>
    </div>
    <div class="footer_bootem">
        <div class="footer_bootem_w w">
            <div class="footer_bootem_p1"></div>
            <p7 class="fr">Copyright © 2015 All rights Reserved | Template by  <span>W3layouts</span></p7>
        </div>
        <div class="footer_bootem_p2 fr"></div>
    </div>
</footer>
</body>
</html>